<template>
	<!-- 固定高度的容器，flex反向布局是关键 -->
	<div class="chat-container" v-infinite-scroll-v2="loadMore" infinite-scroll-distance="1"
		style="height: 500px; overflow-y: auto; display: flex; flex-direction: column-reverse">
		<!-- 消息列表（注意数据要反向展示） -->
		<div v-for="(msg, index) in messages" :key="index">
			{{index}} - {{ msg.content }}
		</div>

		<!-- 加载状态 -->
		<div v-if="loading" class="loading">加载中...</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				messages: [], // 消息列表（按时间倒序存储，最新消息在数组末尾）
				page: 1,
				loading: false,
				hasMore: true
			}
		},
		mounted() {
			// this.loadMore();
		},
		methods: {
			async loadMore() {

				if (this.loading || !this.hasMore) return

				this.loading = true
				try {
					// 模拟API请求（获取更早的历史消息）
					const newMessages = await this.fetchHistory(this.page)

					if (newMessages.length) {
						// 将新消息插入到数组头部（保持时间顺序）
						this.messages = [...this.messages, ...newMessages]
						this.page++
					} else {
						this.hasMore = true
					}
				} finally {
					this.loading = false
				}
			},
			fetchHistory(page) {
				// 模拟接口返回数据（返回更早的历史消息）
				return new Promise(resolve => {
					setTimeout(() => {
						resolve(
							Array.from({
								length: 10
							}, (_, i) => ({
								content: `历史消息 ${page}_${i} - ${new Date().toLocaleString()}`
							}))
						)
					}, 1000)
				})
			}
		}
	}
</script>

<style>
	.chat-container {
		/* 确保内容从底部开始显示 */
		display: flex;
		flex-direction: column-reverse;
		/* 关键样式：反向flex布局 */
		border: 1px solid #eee;
	}

	.loading {
		padding: 10px;
		text-align: center;
		color: #666;
	}
</style>
